<template>
  <div class="cart">
    <div class="hd-box">
      <div class="container">
        <div class="left">
          <div class="hd-logo">
            <a href="/#/index"></a>
          </div>
          <h3>我的购物车</h3>
          <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
        </div>
        <div class="right">
          <div class="user">
            <a href="javascript:;" v-if="username"
              >{{ username }}
              <i class="iconfont icon-arrow-right"></i>
              <div class="child">
                <ul>
                  <li>
                    <a href="javascript:;" target="_blank">个人中心</a>
                  </li>
                  <li>
                    <a href="javascript:;" target="_blank">评价晒单</a>
                  </li>
                  <li>
                    <a href="javascript:;" target="_blank">我的喜欢</a>
                  </li>
                  <li>
                    <a href="javascript:;" target="_blank">小米账户</a>
                  </li>
                  <li>
                    <a href="javascript:;" @click="logout">退出登录</a>
                  </li>
                </ul>
              </div>
            </a>
            <a href="/#/login" v-else>登录</a>
          </div>
          <div class="sep">|</div>
          <div class="order">
            <a href="javascript:;" v-if="username">我的订单</a>
            <a href="/#/regiest" v-else>注册</a>
          </div>
        </div>
      </div>
    </div>
    <div class="bd-box">
      <div class="goods-box container" v-if="username">
        <div class="goods-list">
          <div class="row row-title">
            <div
              class="col col-check"
              :class="{ checked: allChecked }"
              @click="toggleAll"
            >
              <span>√</span>全选
            </div>
            <div class="col col-img"></div>
            <div class="col col-name">商品名称</div>
            <div class="col col-price">单价</div>
            <div class="col col-num">数量</div>
            <div class="col col-total">小计</div>
            <div class="col col-action">操作</div>
          </div>
          <div class="row row-item" v-for="(item, index) in list" :key="index">
            <div
              class="col col-check"
              :class="{ checked: item.productSelected }"
              @click="updateNum(item)"
            >
              <span>√</span>
            </div>
            <div class="col col-img">
              <img :src="item.productMainImage" alt="" />
            </div>
            <div class="col col-name">
              {{ item.productName + ' ' + item.productSubtitle }}
            </div>
            <div class="col col-price">{{ item.productPrice }}元</div>
            <div class="col col-num">
              <a href="javascript:;" @click="updateNum(item, '-')">-</a>
              <!-- <input type="text" name="" id="" value="1" /> -->
              <span>{{ item.quantity }}</span>
              <a href="javascript:;" @click="updateNum(item, '+')">+</a>
            </div>
            <div class="col col-total">{{ item.productTotalPrice }}元</div>
            <div class="col col-action" @click="deletePro(item)">X</div>
          </div>
        </div>
        <div class="order-box container">
          <div class="back-to-shop">
            <a href="/#/index">继续购物</a>
            共<span>{{ list.length }}</span
            >件商品，已选择<span>{{ checkedNum }}</span
            >件
          </div>
          <div class="total">
            合计：<span>{{ cartTotalPrice }}</span
            >元
            <a href="javascript:;" class="btn">去结算</a>
          </div>
        </div>
      </div>
      <div class="not-logged container" v-else>
        <h3>您的购物车还是空的！</h3>
        <p>登录后将显示您之前加入的商品</p>
        <a href="/#/login" class="login-btn">立即登录</a>
        <a href="/#/index" class="shop-btn">马上去购物</a>
      </div>
    </div>

    <nav-footer></nav-footer>
  </div>
</template>

<script>
import NavFooter from '../components/NavFooter'
export default {
  name: 'cart',
  components: {
    NavFooter
  },
  data () {
    return {
      list: [], // 商品列表
      allChecked: false, // 是否全选
      cartTotalPrice: 0, // 商品总金额
      checkedNum: 0 // 选中商品数量
    }
  },
  computed: {
    username () {
      return this.$store.state.username
    }
  },
  created () {
    if (this.$cookie.get('userId')) {
      this.getCarts()
    }
  },

  methods: {
    // 获取购物车列表
    getCarts () {
      this.$http.get('/api/carts').then((res) => {
        // console.log(res.cartProductVoList[0])
        this.renderData(res)
      })
    },
    // 控制全选功能
    toggleAll () {
      const url = this.allChecked
        ? '/api/carts/unSelectAll'
        : '/api/carts/selectAll'
      this.$http.put(url).then((res) => {
        this.renderData(res)
      })
    },
    // 更新购物车数量和购物车单选状态
    updateNum (item, type) {
      let quantity = item.quantity
      let selected = item.productSelected
      if (type === '-') {
        if (quantity === 1) {
          alert('商品至少保留一件')
          return
        }
        --quantity
      } else if (type === '+') {
        if (quantity > item.productStock) {
          alert('购买数量不能超过库存数量')
          return
        }
        ++quantity
      } else {
        selected = !item.productSelected
        console.log(45)
      }
      this.$http
        .put(`/api//carts/${item.productId}`, {
          quantity,
          selected
        })
        .then((res) => {
          this.renderData(res)
        })
    },

    // 删除商品
    deletePro (item) {
      // DELETE / carts / { productId }
      this.$http.delete(`/api/carts/${item.productId}`).then((res) => {
        alert('删除成功')
        this.renderData(res)
      })
    },
    // 公共赋值
    renderData (res) {
      this.list = res.cartProductVoList || []
      this.allChecked = res.selectedAll
      this.cartTotalPrice = res.cartTotalPrice
      this.checkedNum = this.list.filter((item) => item.productSelected).length
    },
    // 退出登录
    logout () {
      this.$http.post('/api/user/logout').then(() => {
        alert('退出成功')
        this.$cookie.set('userId', '', { expires: '-1' })
        this.$store.dispatch('saveUserName', '')
        this.$store.dispatch('saveCartCount', '0')
      })
    }
  }
}
</script>

<style lang="scss">
@import '../assets/scss/config.scss';
@import '../assets/scss/mixin.scss';
.cart {
  .hd-box {
    background-color: #fff;
    border-bottom: 2px solid #ff6700;
    .container {
      height: 100px;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        .hd-logo {
          width: 48px;
          height: 48px;
          background-color: $colorA;
          a {
            display: block;
            width: 96px;
            height: 48px;
            &:before {
              content: '';
              @include bgImg(48px, 48px, '../../public/imgs/mi-logo.png');
            }
            &:after {
              content: '';
              @include bgImg(48px, 48px, '../../public/imgs/mi-home.png');
            }
            &:hover {
              margin-left: -48px;
            }
            transition: margin 0.3s;
          }
        }
        h3 {
          font-size: 28px;
          font-weight: normal;
          margin-left: 45px;
        }
        p {
          height: 20px;
          color: #757575;
          margin-left: 15px;
        }
      }
      .right {
        display: flex;
        align-items: center;
        .sep {
          padding: 0 14px;
        }
        a {
          display: block;
          height: 40px;
          color: #757575;
          font-size: 12px;
          line-height: 40px;
          padding: 0 5px;
        }
        .user {
          position: relative;
          a {
            &:hover {
              color: #fd6600;
              .child {
                display: block;
              }
            }
            .iconfont {
              display: inline-block;
              transform: rotate(90deg);
              font-size: 12px;
              margin-top: 3px;
            }
            .child {
              display: none;
              position: absolute;
              top: 40px;
              left: 50%;
              transform: translateX(-50%);
              width: 110px;
              background-color: #fff;
              box-shadow: 0 5px 6px rgba(0, 0, 0, 0.2);
              ul {
                margin-top: 5px;
                li {
                  a {
                    display: block;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .bd-box {
    .goods-box {
      margin-bottom: 112px;
      .goods-list {
        background-color: #fff;
        margin-top: 38px;
        margin-bottom: 18px;
        .col-check {
          width: 110px;
          &.checked span {
            background-color: #ff6700;
            border-color: #ff6700;
            color: #fff;
            &:hover {
              color: #fff;
            }
          }
          span {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid rgb(224, 224, 224);
            margin-left: 24px;
            margin-right: 15px;
            color: transparent;
            text-align: center;
            line-height: 20px;
            &:hover {
              color: rgb(117, 117, 117);
            }
          }
        }
        .col-img {
          width: 120px;
          img {
            display: inline-block;
            width: 80px;
            height: 80px;
          }
        }
        .col-name {
          width: 380px;
        }
        .col-price {
          width: 158px;
          padding-right: 10px;
          text-align: center;
        }
        .col-num {
          width: 150px;
          text-align: center;
        }
        .col-total {
          width: 201px;
          padding-right: 81px;
          text-align: right;
        }
        .col-action {
          width: 80px;
          padding-right: 26px;
          text-align: center;
          cursor: pointer;
        }
        .row {
          display: flex;
          align-items: center;
        }
        .row-title {
          height: 70px;
          font-size: 14px;
          color: rgb(66, 66, 66);
        }

        .row-item {
          height: 117px;
          padding: 5px 0;
          font-size: 16px;
          color: #424242;
          border-top: 1px solid #e0e0e0;
          .col-name {
            font-size: 18px;
          }
          .col-total {
            color: #ff6700;
          }
          .col-num {
            width: 148px;
            display: flex;
            justify-content: space-between;
            height: 38px;
            border: 1px solid #e0e0e0;
            a {
              display: inline-block;
              width: 38px;
              height: 38px;
              font-size: 24px;
              line-height: 34px;
              color: #757575;
            }
            span {
              display: inline-block;
              width: 72px;
              line-height: 38px;
              text-align: center;
            }
          }
        }
      }
      .order-box {
        font-size: 14px;
        color: #666666;
        margin-top: 20px;
        height: 50px;
        line-height: 50px;
        .back-to-shop {
          float: left;
          margin-left: 29px;
          a {
            color: #666666;
            margin-right: 37px;
          }
          span {
            color: #ff6600;
            margin: 0 5px;
          }
        }
      }
      .total {
        float: right;
        font-size: 14px;
        color: #ff6600;
        span {
          font-size: 24px;
        }
        a.btn {
          display: inline-block;
          width: 202px;
          height: 50px;
          line-height: 50px;
          font-size: 18px;
          margin-left: 37px;
          background-color: #ff6700;
          color: #fff;
          text-align: center;
        }
      }
    }
    .not-logged {
      height: 273px;
      padding-left: 558px;
      margin: 65px auto 130px;
      background: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/cart/cart-empty.png)
        no-repeat 124px 0;
      color: #b0b0b0;
      overflow: hidden;
      box-sizing: border-box;
      h3 {
        font-size: 36px;
        margin-top: 70px;
      }
      p {
        font-size: 20px;
        color: #b0b0b0;
      }
      a {
        display: inline-block;
        margin-top: 20px;
        width: 170px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-size: 14px;
        box-sizing: border-box;
        &.login-btn {
          background-color: #ff6700;
          color: #fff;
          margin-right: 10px;
        }
        &.shop-btn{
          border: 1px solid #ff6700;
          color:#ff6700;
        }
      }
    }
  }
}
</style>
